<template>
  <div class="mod-config">
    <el-row :gutter="20">
      <el-col>
        <el-card class="box-card">
          <div class="text item" style="padding-right: 20px;">
            <div v-for="(item,index) in rowList" :key="index">
              <el-row v-if="item.type == 'param'" style="margin-bottom: 10px;">
                <el-col :span="24">
                  <div style="min-height: 100px;padding: 30px 15px;box-shadow: 1px 1px 3px 3px #e7e7e7;">
                    <el-button-group style="margin: 0 3px;margin-bottom: 5px;" v-for="(paramsItem,paramsIndex) in item.params" :key="paramsIndex">
                      <el-button type="primary">{{paramsItem.name}}</el-button>
                      <el-button type="primary" icon="el-icon-edit" title="设置默认值" @click="defaultSetting('param',index,paramsIndex,'',paramsItem)"></el-button>
                    </el-button-group>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="item.type == 'widget'" style="margin-bottom: 10px;">
                <el-col :span="24">
                  <el-row style="margin-bottom: 10px;">
                    <span v-for="(insideItem,insideIndex) in item.paramRows" :key="insideIndex">
                      <el-col :span="24">
                        <div style="min-height: 100px;padding: 30px 15px;box-shadow: 1px 1px 3px 3px #e7e7e7;">
                          <el-button-group style="margin: 0 3px;margin-bottom: 5px;" v-for="(insideParamsItem,insideParamsIndex) in insideItem.params" :key="insideParamsIndex">
                            <el-button type="primary">{{insideParamsItem.name}}</el-button>
                            <el-button type="primary" icon="el-icon-edit" title="设置默认值" @click="defaultSetting('insideParam',index,insideIndex,insideParamsIndex,insideParamsItem)"></el-button>
                          </el-button-group>
                        </div>
                      </el-col>
                    </span>
                  </el-row>
                    <el-row :gutter="10" style="margin-bottom: 10px;">
                      <span v-for="(columnItem,idx) in item.widgets" :key="idx">
                        <el-col :span="columnItem.width">
                          <div style="min-height: 100px;padding: 30px 15px;box-shadow: 1px 1px 3px 3px #e7e7e7;">
                            <div style="margin-bottom: 15px;">
                              <div style="float: left;">{{columnItem.name}}</div>
                              <div style="float: right;"></div>
                              <div style="clear: both;"></div>
                            </div>
                            <div>
                              <div v-if="columnItem.widget.data.config.chart_type == 'table'" style="overflow: auto;">
                                <chart-table ref="chartTable"></chart-table>
                              </div>
                              <div id="main" class="main" ref="main" style="min-height: 200px;"></div>
                            </div>
                          </div>
                        </el-col>
                      </span>
                    </el-row>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 弹窗,设置默认值 -->
    <default-setting v-if="defaultVisible" ref="defaultDialog" @refreshParams="getDefaultData"></default-setting>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  var echarts = require('echarts');
  import { getDimensionConfig, getDataSeries, castRawData2Series } from '@/views/cboard/util/tools.js'
  import { getBoardData, getWidgetOne,getAggregateData,getDataSetOne } from '@/api/cboard/cboard'
  import { chartDataProcess } from '../util/chartDataProcess.js'
  import { parseOption } from '../util/lineService.js'
  import ChartTable from '@/components/chart/table'
  import DefaultSetting from '../sign/defaultset'

  export default {
    name: 'Wel',
    data() {
      return {
        rowList: [],
        AggregateStr: {
            reload: false,
            datasetId: '',
            datasourceId: '',
            query: '',
            cfg: {
                rows: [],
                columns: {
                    columnName: '',
                    filterType: '',
                    values: '',
                    id: ''
                },
                filters: [],
                values: {
                    column: '',
                    aggType: '',
                },
            },
        },
        tableOption: [],
        defaultVisible: false,
      }
    },
    computed: {
      ...mapGetters(['website'])
    },
    created(){
      this.dataDesign()
    },
    components: {
      ChartTable,
      DefaultSetting
    },
    methods: {
      // 数据调整
      dataDesign(){
        if(this.$route.query.id){
          getBoardData(this.$route.query.id).then(result => {
            this.rowList = result.data.layout.rows
            this.getAggData()
          })
        }
      },
      getAggData(){
        let paramsList = []
        this.rowList.forEach(item => {
          if(item.type == 'param'){
            let paramsObj = {}
            for(let i = 0; i < item['params'].length; i++){
              paramsObj = {
                col: item['params'][i]['col'][0]['column'],
                id: '',
                sort: 'asc',
                type: item['params'][i]['type'],
                values: item['params'][i]['values']
              }
              paramsList.push(paramsObj)

            }
          }

          if(item.type == 'widget'){
            let paramsObj = {}
            if(item['paramRows'].length){
              for(let i = 0; i < item['paramRows'].length;i++){
                for(let j = 0; j < item['paramRows'][i]['params'].length;j++){
                  paramsObj = {
                    col: item['paramRows'][i]['params'][j]['col'][0]['column'],
                    id: '',
                    sort: 'asc',
                    type: item['paramRows'][i]['params'][j]['type'],
                    values: item['paramRows'][i]['params'][j]['values']
                  }
                  paramsList.push(paramsObj)
                }
              }
            }
            for(let i = 0; i < item['widgets'].length; i++){
              let currentItem = item['widgets'][i]
              let chartType = currentItem['widget']['data']['config']['chart_type']
              let widgetId = currentItem['widgetId']
              let datasetId = currentItem['widget']['data']['datasetId']

              getWidgetOne(widgetId).then(response => {
                let jsonStr = JSON.parse(response.data.data)
                let dataSeries = getDataSeries(jsonStr.config)
                getDataSetOne(datasetId).then(response1 => {
                  let jsonStr1 = JSON.parse(response1.data.data)
                  this.AggregateStr.datasourceId = jsonStr1.datasource
                  this.AggregateStr.query = jsonStr1.query.sql
                  this.AggregateStr.datasetId = datasetId
                  this.AggregateStr.reload = false
                  this.AggregateStr.cfg.filters = getDimensionConfig(jsonStr.config.filters.concat(paramsList))
                  this.AggregateStr.cfg.columns = getDimensionConfig(jsonStr.config.groups)
                  this.AggregateStr.cfg.rows = getDimensionConfig(jsonStr.config.keys)
                  this.AggregateStr.cfg.values = _.map(dataSeries, function(s) {
                      return {
                          column: s.name,
                          aggType: s.aggregate
                      }
                  })

                  let cfgJson = JSON.stringify(this.AggregateStr)

                  getAggregateData({ mapStr: cfgJson}).then(response => {
                    let result1 = castRawData2Series(response.data, jsonStr.config)
                    result1.chartConfig = jsonStr.config
                    this.tableOption = chartDataProcess(result1.chartConfig, result1.keys, result1.series, result1.data, result1.seriesConfig)
                    if(chartType == 'line' || chartType == 'bar'){
                        this.chartShow(parseOption(result1,chartType),i)
                    }else{
                        this.$nextTick(() => {
                            for(let j = 0; j < this.$refs.chartTable.length;j++){
                                this.$refs.chartTable[j].init(this.tableOption)
                            }
                        })
                    }
                  })
                })
              })
            }
          }

        })
      },
      chartShow(option,index) {
          let chartsList = document.getElementsByClassName('main')
          let myChart = echarts.init(chartsList[index]);
          myChart.setOption(option)
      },
      // 设置参数默认值
      defaultSetting(type,rowIndex,paramsIndex,insideParamsIndex,paramsData){
        this.defaultVisible = true
        this.$nextTick(() => {
          this.$refs.defaultDialog.init(type,rowIndex,paramsIndex,insideParamsIndex,paramsData)
        })
      },
      // 获取参数默认值
      getDefaultData(row){
        if(row.type == 'param'){
          this.rowList[row.rowIndex].params[row.paramsIndex] = row.paramsData
        }else if(row.type == 'insideParam'){
          this.rowList[row.rowIndex]['paramRows'][row.paramsIndex]['params'][insideParamsIndex] = row.paramsData
        }
        this.rowList = [...this.rowList]
        this.getAggData()
      },


      getData() {
        if (this.count < this.DATA.length - 1) {
          this.count++
        } else {
          this.count = 0
        }
        this.isText = true
        this.actor = this.DATA[this.count]
      },
      setData() {
        let num = 0
        let count = 0
        let active = false
        const timeoutstart = 5000
        const timeoutend = 1000
        const timespeed = 10
        setInterval(() => {
          if (this.isText) {
            if (count == this.actor.length) {
              active = true
            } else {
              active = false
            }
            if (active) {
              num--
              this.text = this.actor.substr(0, num)
              if (num == 0) {
                this.isText = false
                setTimeout(() => {
                  count = 0
                  this.getData()
                }, timeoutend)
              }
            } else {
              num++
              this.text = this.actor.substr(0, num)
              if (num == this.actor.length) {
                this.isText = false
                setTimeout(() => {
                  this.isText = true
                  count = this.actor.length
                }, timeoutstart)
              }
            }
          }
        }, timespeed)
      }
    }
  }
</script>

<style scoped="scoped" lang="scss">
  .wel-contailer {
    position: relative;
  }

  .banner-text {
    position: relative;
    padding: 0 20px;
    font-size: 20px;
    text-align: center;
    color: #333;
  }

  .banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    display: none;
  }

  .actor {
    height: 250px;
    overflow: hidden;
    font-size: 18px;
    color: #333;
  }

  .actor:after {
    content: '';
    width: 3px;
    height: 25px;
    vertical-align: -5px;
    margin-left: 5px;
    background-color: #333;
    display: inline-block;
    animation: blink 0.4s infinite alternate;
  }

  .typeing:after {
    animation: none;
  }

  @keyframes blink {
    to {
      opacity: 0;
    }
  }

  .mod-config {
    padding: 10px 15px;
  }

  /deep/ .el-card {
    background-color: #fff;
  }

  /deep/ .el-card__body {
    padding: 0;
    padding-bottom: 20px;
  }

  .box-card .item {
    padding-left: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom: solid 1px #e7e7e7;
  }

  .search {
    padding: 20px 20px 0 20px;
  }

  .filter-tree {
    margin-top: 20px;
  }

  /deep/ .el-tree {
    background-color: #fff;
  }

  .field-ul {
    padding-left: 24px;

    li {
      padding-left: 10px;
    }
  }
</style>
